<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { nextTick, ref, toRaw, watch } from 'vue'
import { headersStore } from '@/stores/apiHeader'
import { useHomeStore } from '@/stores/module/home'
import { useFinanceStore } from '@/stores/module/finance'
import { useHumanStore } from '@/stores/module/human'
import { useSupplyStore } from '@/stores/module/supply'
import { useDealerDataStore } from '@/stores/module/dealerData'
import { useUserStore } from '@/stores/user'
import { mapStore } from '@/stores/worldMap'
import { baseToolsStore } from '@/stores/baseTools'
// lang pinia
import { useLangStore } from '@/stores/lang'
import { useRouter } from 'vue-router'

// header的pinia实例
const headerStore = headersStore()

// 其他页面的pinia实例
const homeStore = useHomeStore()
const financeStore = useFinanceStore()
const humanStore = useHumanStore()
const supplyStore = useSupplyStore()
const dealerDataStore = useDealerDataStore()
const useToolsStore = baseToolsStore()
const { groupLeft, groupRight } = storeToRefs(useToolsStore)
// mapStore
const theMapStore = mapStore()
const { initTime } = storeToRefs(theMapStore)
const router = useRouter()
const loading = ref(false)

const clearFunc = (time) => {
  const path = toRaw(router).currentRoute.value.path
  const meta = toRaw(router).currentRoute.value.meta

  const storeMap = {
    '/home': homeStore,
    '/finance': financeStore,
    '/supply': supplyStore,
    '/dealer-data': dealerDataStore,
    '/human': humanStore,
  }
  // 根据当前页面的路由,执行不同pinia的clearVersion
  const resetStore = storeMap[path]
  if (resetStore) {
    resetStore.$reset()
    resetStore.getAll()
  }

  if (meta.isLoad) {
    setTimeout(() => {
      loading.value = false
      theMapStore.setChartShow(true)
      theMapStore.setChartLeftShow(true)
      theMapStore.setChartRightShow(true)
    }, time)
  } else {
    loading.value = false
  }
}

// 获取各个标题的语言
const LangTitleFunc = () => {
  if (!useUserStore().token) return
  const langStore = useLangStore()
  langStore.downloadTitle()
}

// 监听headersStore的数据变化
const timeout = ref(null) // 给调getAll用的
const timeout2 = ref(null) // 给调title用的
watch(
  () => [headerStore.$state, router, theMapStore.$state.globalLoading],
  () => {
    theMapStore.setChartShow(false) // 隐藏图表
    theMapStore.setChartLeftShow(false)
    theMapStore.setChartRightShow(false)
    loading.value = true // 显示loading
    groupLeft.value = true
    groupRight.value = true

    // 调接口的方法
    clearTimeout(timeout.value)
    timeout.value = setTimeout(() => {
      clearFunc(initTime.value)
    }, 900)

    // 拉title的方法
    clearTimeout(timeout2.value)
    timeout2.value = setTimeout(() => {
      nextTick(() => {
        LangTitleFunc()
      })
    }, 3000)
  },
  { deep: true }
)
</script>

<template>
  <div
    v-loading.fullscreen.lock="loading"
    element-loading-text="Loading..."
    element-loading-background="rgba(0, 0, 0, 0.5)"
  >
    <RouterView />
  </div>
</template>

<style lang="scss">
html,
body {
  font-family: 微软雅黑, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
}
.el-loading-text {
  // loading文字,不让选中
  user-select: none;
}
.el-carousel__indicators--horizontal {
  // 修改指示器长度为 10px
  width: 100%;
  text-align: center;
  .el-carousel__indicator--horizontal {
    .el-carousel__button {
      width: 10px;
    }
  }
}
.el-carousel__indicator.is-active button {
  background-color: #00eef0;
}

/* 进入之前和离开后的样式 */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
/* 离开和进入过程中的样式 */
.v-enter-active,
.v-leave-active {
  /* 添加过渡动画 */
  transition: opacity 0.5s ease;
}
/* 进入之后和离开之前的样式 */
.v-enter-to,
.v-leave-from {
  opacity: 1;
}
</style>

<style>
.animation-dialog .el-dialog {
  .box-com {
    .title-box > h1 {
      font-size: 30px;
    }
  }
}
.left-enter-active {
  animation: slide-in-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.left-leave-active {
  animation: slide-out-left 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.right-enter-active {
  animation: slide-in-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.right-leave-active {
  animation: slide-out-right 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-out-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
}

@keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation slide-out-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
}

@keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
  /* border-radius: 2em; */
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  /* border-radius: 2em; */
}
</style>
